<!--
    @name 分类头部组件
    @description 控制对应分类展开收起的头部组件（应用：工单详情页面）
    @author haoyang.ding
    @date 2021-02-03
-->
<template>
  <section class="query-comp">
    <div class="query-comp__header" :style="`width: ${width};`">
      <div class="filter-container filter-title" style="display: inline-block" @click="changeShow">
        {{ title }}
        <span class="query-comp__header-icon">
          <i :class="isShow ? 'el-icon-caret-bottom' : 'el-icon-caret-top'" />
        </span>
      </div>
      <slot name="other" />
    </div>
    <el-collapse-transition>
      <OneTableTemplate
        v-show="isShow"
        ref="multipleTable"
        :dynamic-components="dynamicInputs"
        :dynamic-table-cols="dynamicTables"
        :is-show-pagination="isShowPagination"
        :dynamic-is-show-select="isShowSelect"
        :dynamic-table-defult-height="tableHeight"
        :dynamic-form-fields="formField"
        :dynamic-buttons="dynamicButtons"
      />
    </el-collapse-transition>
  </section>
</template>

<script>
import OneTableTemplate from '@/components/templates/oneTable'
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
export default {
  name: 'QueryClassComp',
  components: {
    OneTableTemplate
  },
  mixins: [oneTableWithViewTemplateMixins],
  /**
   * @author haoyang.ding
   * @param { String } width 头部宽度
   * @param { String } title 头部标题
   * @param { Array } dynamicInputs 动态生成输入框
   * @param { Array } dynamicTables 动态生成列表
   * @param { Boolean } isShowPagination 是否显示分页
   * @param { Boolean } isShowSelect 是否显示表格的多选框
   * @param { Number } tableHeight 设置表格高度
   */
  props: {
    dynamicButtons: {
      type: Array, default: () => ([])
    },
    width: {
      type: String,
      default: '50%'
    },
    title: {
      type: String,
      default: ''
    },
    dynamicInputs: {
      type: Array,
      default: () => ([])
    },
    dynamicTables: {
      type: Array,
      default: () => ([])
    },
    isShowPagination: {
      type: Boolean
    },
    isShowSelect: {
      type: Boolean
    },
    tableHeight: {
      type: Number, default: 300
    },
    formField: {
      type: Object, default: () => ({})
    },
    isShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // isShow: true
    }
  },
  methods: {
    changeShow() {
      this.isShow = !this.isShow
    }
  }
}
</script>

<style lang="scss" scoped>
.query-comp {
  width: 100%;
  background-color: #fff;
  // &__header {
  .filter-container.filter-title {
    width: 160px;
    cursor: pointer;
  }
  // }
}
</style>
